<template>
  <div class="container">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    page: {
      default() {
        //设置默认值
        return 1;
      },
      type: Number
    },
    pageSize: {
      default() {
        //设置默认值
        return 20;
      },
      type: Number
    },
    pageSizes: {
      default() {
        //设置默认值
        return [20, 40, 60, 80, 100];
      },
      type: Array
    },
    total: {
      default() {
        //设置默认值
        return 0;
      },
      type: Number
    }
  },
  methods: {
    handleSizeChange(val) {
      // 控制每页显示几条
      console.log(`每页 ${val} 条`);
      this.$emit("changepageSize", val);
    },
    handleCurrentChange(val) {
      // 控制当前页码
      console.log(`当前页: ${val}`);
      this.$emit("changePage", val);
    }
  },
  data() {
    return {
      // currentPage4: 1 //控制当前显示哪一页
    };
  }
};
</script>

<style lang='less' scoped>
.container {
  background: #fff;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: right;
}
</style>